<!--
 * @Descripttion: 
 * @version: 
 * @Author: Ansel
 * @Date: 2020-03-31 12:10:37
 * @LastEditors: Ansel
 * @LastEditTime: 2020-03-31 15:09:03
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.js"></script>
    <style>
        #chart1{
            width: 1000px;
            height: 800px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="chart1"></div>
    <script>
        var myCharts1 = echarts.init(document.getElementById("chart1"));
        myCharts1.setOption({
            title:{
                id:'txt',
                show:true,
                text:'当月销售业绩清单',
                link:"http://www.baidu.com",
                target:"self",
                textStyle:{
                    color:'gold',
                    fontStyle:'italic',
                    fontWeight:'normal',//fontWight默认值为bold，官网写错了
                    fontFamily:'Microsoft YaHei',
                    fontSize:20,
                    lineHeight:30,
                    textBorderColor:'red',
                    textBorderWidth:2,
                    textShadowColor:'#000',
                    textShadowBlur:2,
                    textShadowOffsetX:5,
                    textShadowOffsetY:10,
                },
                //副标题
                subtext:"Ansel",
                sublink:"http://www.qq.com",
                subtarget:"self",
                subtextStyle:{
                },
                textAlign:'left', // 两个标题的内容不一样，有可能被截断
                padding:[10,5,20,30],
                itemGap:10,
                left:10,
                top:10,
                backgroundColor:'#ccc',
                borderColor:'#000',
                borderWidth:2,
                borderRadius:[5,10,20,30],
                shadowColor:'rgba(0,0,0,0.5)',
                shadowBlur:10,
                textShadowOffsetX:5,
                textShadowOffsetY:5

            },
            legend:{
                data:['销量']
            },
            xAxis:{
                data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
            },
            yAxis:{//y轴的设置

            },
            series:{ //系列列表
                name:"销量",
                type:'bar', //图表的类型
                data:[5,20,36,10,19,14] //图表的数据
            }
        })
    </script>
</body>
</html>